<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style>
            
            /* the overlayed element */ .apple_overlay {
                /* initially overlay is hidden */
                display: none;
                /* growing background image */
                background-image: url(./img/overlay/white.png);
                /*
                 width after the growing animation finishes
                 height is automatically calculated
                 */
                width: 640px;
                /* some padding to layout nested elements nicely  */
                padding: 35px;
                /* a little styling */
                font-size: 11px;
            }
            
            /* default close button positioned on upper right corner */ .apple_overlay .close {
                background-image: url(./img/overlay/close.png);
                position: absolute;
                right: 5px;
                top: 5px;
                cursor: pointer;
                height: 35px;
                width: 35px;
            }
        </style>
        <style>
            /* black version of the overlay. simply uses a different background image */
            div.apple_overlay.black {
                background-image: url(./img/overlay/transparent.png);
                color: #fff;
            }
            
            div.apple_overlay h2 {
                margin: 10px 0 -9px 0;
                font-weight: bold;
                font-size: 14px;
            }
            
            div.black h2 {
                color: #fff;
            } #apple {
                margin-top: 10px;
                text-align: center;
            } #apple img {
                background-color: #fff;
                padding: 2px;
                border: 1px solid #ccc;
                margin: 2px 5px;
                cursor: pointer;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- trigger elements -->
        <div id="apple">
            <img src="./img/photos/gustavohouse.jpg" rel="#photo1"/>
			<img src="./img/photos/alexanderplatz-station.jpg" rel="#photo2"/>
        </div><!-- overlayed element, which is styled with external stylesheet -->
        <div class="apple_overlay black" id="photo1">
            <img src="./img/photos/gustavohouse-medium.jpg" />
            <div class="details">
                <h2>Berlin Gustavohouse</h2>
                <p>
                    The Gustavo House in Storkower Strasse. It was built in 1978 and
                    reconstructed in 1998 by the Spanish artist Gustavo.
                </p>
            </div>
        </div>
        <div class="apple_overlay" id="photo2">
            <img src="./img/photos/alexanderplatz-station-medium.jpg" />
            <div class="details">
                <h2>Berlin Alexanderplatz Station</h2>
                <p>
                    Berlin Alexanderplatz is a railway station in the Berlin city
                    centre and is one of the city's most important interchange
                    points for local public transport.
                </p>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $("#apple img[rel]").overlay({
                    effect: 'apple'
                });
            });
        </script>
    </body>
</html>
